import G2BaseChart from './G2BaseChart'

const LineBarChart = ({
  data,
  xField = 'time',
  yField = 'waiting',
  xField2 = 'text2',
  yField2 = 'people',
  width = 400,
  color = '#1890FF',
  smooth = true,
  showArea = false,
}) => {
  const renderChart = (chart) => {
    chart.data(data)
    chart
      .interval()
      .encode('x', xField)
      .encode('y', yField)
      .axis('y', { title: yField, titleFill: '#5B8FF9' })

    chart
      .line()
      .encode('x', xField)
      .encode('y', yField2)
      .encode('shape', 'smooth')
      .style('stroke', '#fdae6b')
      .style('lineWidth', 2)
      .scale('y', { independent: true })
      .axis('y', {
        position: 'right',
        grid: null,
        title: 'People',
        titleFill: '#fdae6b',
      })
    chart.render()
  }

  return <G2BaseChart data={data} width={width} render={renderChart} />
}

export default LineBarChart
